<template>
<div class="person">
  <ul>
    <li v-for="(item,index) in personList" :key="index">
      {{item.name}}--{{item.age}}
    </li>
  </ul>
</div>
</template>
<script lang="ts" setup name='Person'>
import {defineProps,withDefaults} from "vue"
import { type PersonsList } from '@/types';
//第一种写法:仅接收
// const props = defineProps(["personList"])

//接收list+限制类型
// defineProps<{personList?: PersonsList}>()
/*
* defineProps 函数：
1、defineProps 是 Vue 3 中用于声明组件 props 的函数。
*   它在 <script setup> 中被直接调用，用于指定父组件传递到当前子组件的数据结构和类型。
2、<{ personList?: PersonsList }>：
这是一个 TypeScript 泛型类型定义，表示该 props 中包含一个名为 personList 的属性。
  {} 内的内容定义了 props 的类型。
  personList? 中的问号 (?) 表示 personList 是一个可选的属性，这意味着父组件可以选择传递或者不传递这个 prop。
3、PersonsList：
  PersonsList 是一个自定义的类型。它应该是在代码的其他部分定义的一个接口或类型
  *   （例如接口 interface PersonsList 或类型别名 type PersonsList = ...）。
  PersonsList 的结构可以是一个数组对象、包含某些属性的对象等，这取决于项目的具体定义。
  *   它通常用于类型检查，确保传入 personList 的数据符合预期格式。
示例解读
*
* */

//接收list+限制类型+限制必要性+默认值

withDefaults(defineProps<{personList?: PersonsList}>(), {
  personList: ()=>[
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 25 },]
})
</script>
<style scoped>

</style>